Maz + Kaliane Van #71
Conversation
…n, updated id names
…nd single click temp change.
| @@ -0,0 +1,140 @@ | |||
| // `"use strict";` | |||
|
|
|||
| const state = { | |||
There was a problem hiding this comment.
Love how you all chose to use this psuedostate! I think that it is great practice for what you will see in React though it will be utilized differently!
| const loadControls = () => { | ||
| state.increaseTempButton = document.getElementById('increaseTempButton'); | ||
| state.decreaseTempButton = document.getElementById('decreaseTempButton'); | ||
| state.tempNumber = parseInt(document.getElementById('tempNumberContainer').innerText); | ||
| state.tempNumberContainer = document.getElementById('tempNumberContainer'); | ||
| state.tempNumberClass = document.getElementById('tempNumberContainer').className; | ||
| state.skyEmojiContainer = document.getElementById('skyEmojiContainer'); | ||
| state.skyEmoji = document.getElementById('skyEmojiContainer').innerText; | ||
| state.landEmojiContainer = document.getElementById('landEmojiContainer'); | ||
| state.landEmoji = document.getElementById('landEmojiContainer').innerText; | ||
| state.cityNameContainer = document.getElementById('cityNameContainer'); | ||
| state.cityName = document.getElementById('cityNameContainer').innerText; | ||
| state.cityInput = document.getElementById('cityInput'); | ||
| state.realTempButton = document.getElementById('realTempButton'); | ||
| state.skyDropdown = document.getElementById('skyDropdown'); | ||
| state.weatherCity = document.getElementById('weatherCity'); | ||
| }; |
There was a problem hiding this comment.
Oh wow! I love this! This shows me you centering readability! Naming conventions like this make your code a lot more intuitive!
| const getRealTemp = async (locationName) => { | ||
| const locationResp = await axios.get('http://localhost:5000/location',{ params: {q: locationName } }) | ||
|
|
||
| const coords = [locationResp.data[0]['lat'], locationResp.data[0]['lon']] | ||
|
|
||
| const weatherResponse = await getWeather(coords[0],coords[1]) | ||
|
|
||
| return weatherResponse | ||
|
|
||
| } |
There was a problem hiding this comment.
Okay async/await! You used this perfectly!
| state.tempNumber = response.data['main']['temp'] | ||
| }; | ||
|
|
||
| const registerEventHandlers = () => { |
| registerEventHandlers(); | ||
| }; | ||
|
|
||
| onLoaded(); |
There was a problem hiding this comment.
I would suggest putting your onLoaded method inside an event handler for when the document is loaded, that way you can have an extra layer of protection when it comes to things loading in order. Basically, it would help ensure the loadControls and. registerEventHandlers functions would run after the DOM elements are loaded. It would look something like this:
document.addEventListener("DOMContentLoaded", function () {
loadControls()
registerEventHandlers()
}There was a problem hiding this comment.
Awesome job everyone! You really ate this one up! Please feel free to reach out to me if you have any questions about the comments I left or if you want to discuss anything in greater detail! ⭐️
No description provided.